<script setup lang="ts">
import { $day, FORMAT } from '@/utils'

// 当前时间
const now = ref($day.now())

// 自动更新当前时间
let timer: ReturnType<typeof setInterval>

onMounted(() => {
  timer = setInterval(() => {
    now.value = $day.now()
  }, 1000)
})

onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
})

// 示例数据
const birthday = '2000-03-04'
const futureDate = $day.add($day.now(), 2)
const pastDate = $day.subtract($day.now(), 3)

// 格式化示例
const formatExamples = computed(() => ({
  日期时间: $day.format(now.value, FORMAT.DATETIME),
  日期: $day.format(now.value, FORMAT.DATE),
  时间: $day.format(now.value, FORMAT.TIME),
  年月: $day.format(now.value, FORMAT.YEAR_MONTH),
  月日: $day.format(now.value, FORMAT.MONTH_DAY),
  星期: $day.format(now.value, FORMAT.WEEK),
}))

// 相对时间示例
const relativeExamples = computed(() => ({
  未来: $day.fromNow(futureDate),
  过去: $day.fromNow(pastDate),
  本周开始: $day.fromNow($day.startOf(now.value, 'week')),
  本周结束: $day.fromNow($day.endOf(now.value, 'week')),
  本月开始: $day.fromNow($day.startOf(now.value, 'month')),
  本月结束: $day.fromNow($day.endOf(now.value, 'month')),
}))

// 日期判断示例
const dateCheckExamples = computed(() => ({
  是否今天: $day.isToday(now.value),
  是否昨天: $day.isYesterday(pastDate),
  是否明天: $day.isTomorrow(futureDate),
  是否周末: $day.isWeekend(now.value),
}))

// 日期比较示例
const compareExamples = computed(() => ({
  是否本周: $day.isSameWeek(now.value, futureDate),
  是否本月: $day.isSameMonth(now.value, futureDate),
  是否本年: $day.isSameYear(now.value, futureDate),
  是否在周末之前: $day.isBefore(now.value, $day.endOf(now.value, 'week')),
  是否在周初之后: $day.isAfter(now.value, $day.startOf(now.value, 'week')),
  是否在本周内: $day.isBetween(
    now.value,
    $day.startOf(now.value, 'week'),
    $day.endOf(now.value, 'week'),
  ),
}))

// 生日信息
const birthdayInfo = computed(() => {
  const age = $day.getAge(birthday)
  const nextBirthday = $day.getNextBirthday(birthday)
  return {
    年龄: age,
    下一个生日: $day.format(nextBirthday.date, FORMAT.DATE),
    距离下一个生日: nextBirthday.days,
  }
})

// 其他功能示例
const otherExamples = computed(() => ({
  季度: $day.getQuarter(now.value),
  周数: $day.getWeek(now.value),
  月份天数: $day.getDaysInMonth(now.value),
  星期几: $day.getDayOfWeek(now.value),
  几号: $day.getDayOfMonth(now.value),
  年份: $day.getYear(now.value),
  月份: $day.getMonth(now.value),
}))
</script>

<template>
  <view class="min-h-screen bg-black">
    <!-- 背景效果 -->
    <view class="fixed inset-0">
      <view class="absolute inset-0 bg-gradient-to-b from-black via-gray-900 to-black opacity-60" />
      <view class="absolute inset-0 opacity-10 bg-grid-pattern" />
    </view>

    <!-- 主内容 -->
    <view class="relative px-8 py-12">
      <view class="mx-auto max-w-2xl space-y-8">
        <!-- 标题 -->
        <view class="text-center">
          <text class="text-2xl font-bold text-white">Day.js 时间处理示例</text>
          <text class="mt-2 block text-gray-400">展示常用的日期时间处理功能</text>
        </view>

        <!-- 当前时间 -->
        <view class="p-6 rounded-2xl bg-white/5 backdrop-blur-lg">
          <view class="space-y-4">
            <text class="block text-lg font-medium text-white">当前时间</text>
            <view class="space-y-2">
              <view class="flex items-center justify-between">
                <text class="text-gray-400">完整时间</text>
                <text class="text-white">{{ $day.format(now, FORMAT.DATETIME) }}</text>
              </view>
              <view class="flex items-center justify-between">
                <text class="text-gray-400">时间戳</text>
                <text class="text-white">{{ now.valueOf() }}</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 格式化示例 -->
        <view class="p-6 rounded-2xl bg-white/5 backdrop-blur-lg">
          <view class="space-y-4">
            <text class="block text-lg font-medium text-white">格式化示例</text>
            <view class="space-y-2">
              <view
                v-for="(value, key) in formatExamples"
                :key="key"
                class="flex items-center justify-between"
              >
                <text class="text-gray-400">{{ key }}</text>
                <text class="text-white">{{ value }}</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 相对时间示例 -->
        <view class="p-6 rounded-2xl bg-white/5 backdrop-blur-lg">
          <view class="space-y-4">
            <text class="block text-lg font-medium text-white">相对时间示例</text>
            <view class="space-y-2">
              <view
                v-for="(value, key) in relativeExamples"
                :key="key"
                class="flex items-center justify-between"
              >
                <text class="text-gray-400">{{ key }}</text>
                <text class="text-white">{{ value }}</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 日期判断示例 -->
        <view class="p-6 rounded-2xl bg-white/5 backdrop-blur-lg">
          <view class="space-y-4">
            <text class="block text-lg font-medium text-white">日期判断示例</text>
            <view class="space-y-2">
              <view
                v-for="(value, key) in dateCheckExamples"
                :key="key"
                class="flex items-center justify-between"
              >
                <text class="text-gray-400">{{ key }}</text>
                <text class="text-white">{{ value ? '是' : '否' }}</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 日期比较示例 -->
        <view class="p-6 rounded-2xl bg-white/5 backdrop-blur-lg">
          <view class="space-y-4">
            <text class="block text-lg font-medium text-white">日期比较示例</text>
            <view class="space-y-2">
              <view
                v-for="(value, key) in compareExamples"
                :key="key"
                class="flex items-center justify-between"
              >
                <text class="text-gray-400">{{ key }}</text>
                <text class="text-white">{{ value ? '是' : '否' }}</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 生日信息 -->
        <view class="p-6 rounded-2xl bg-white/5 backdrop-blur-lg">
          <view class="space-y-4">
            <text class="block text-lg font-medium text-white">生日信息</text>
            <view class="space-y-2">
              <view class="flex items-center justify-between">
                <text class="text-gray-400">生日</text>
                <text class="text-white">{{ birthday }}</text>
              </view>
              <view
                v-for="(value, key) in birthdayInfo"
                :key="key"
                class="flex items-center justify-between"
              >
                <text class="text-gray-400">{{ key }}</text>
                <text class="text-white">{{ value }}</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 其他功能示例 -->
        <view class="p-6 rounded-2xl bg-white/5 backdrop-blur-lg">
          <view class="space-y-4">
            <text class="block text-lg font-medium text-white">其他功能示例</text>
            <view class="space-y-2">
              <view
                v-for="(value, key) in otherExamples"
                :key="key"
                class="flex items-center justify-between"
              >
                <text class="text-gray-400">{{ key }}</text>
                <text class="text-white">{{ value }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style>
.bg-grid-pattern {
  background-image:
    linear-gradient(to right, rgb(255 255 255 / 5%) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(255 255 255 / 5%) 1px, transparent 1px);
  background-size: 24px 24px;
}
</style>
